<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td>
        <img :src="person.url" alt="" width="100px">
      </td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{ person.name }}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{ person.age }}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="fNames in person.friends">{{ fNames }}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="load()">加载内容<br>刷新消失</button>
</template>

<script setup>
import {ref} from "vue";

const person = ref({name: '', age: '', url: '', friends: []});
const load = () => {
  person.value = {
    url: 'fcq.jpg',
    name: '范传奇',
    age: 18,
    friends: ['第一个人','第二个人','第三个人','第四个人']
  };
};
</script>

<style scoped>

</style>